import React, { Component } from 'react'
// withRouter 高阶组件
import { withRouter } from 'react-router-dom'
class Kind extends Component {
  toDetial (proid) {
    this.props.history.push('/detail/' + proid)
  }
  render() {
    console.log(this.props)
    return (
      <div className="box">
        <header className="header">
          <ul>
            <li>左</li>
            <li>中</li>
            <li>右</li>
          </ul>
        </header>
        <div className="content">
          <ul>
            <li onClick = { this.toDetial.bind(this, 1)}>1</li>
            <li onClick = { this.toDetial.bind(this, 2)}>2</li>
            <li onClick = { this.toDetial.bind(this, 3)}>3</li>
            <li onClick = { this.toDetial.bind(this, 4)}>4</li>
            <li onClick = { this.toDetial.bind(this, 5)}>5</li>
            <li onClick = { this.toDetial.bind(this, 6)}>6</li>
            <li onClick = { this.toDetial.bind(this, 7)}>7</li>
            <li onClick = { this.toDetial.bind(this, 8)}>8</li>
            <li onClick = { this.toDetial.bind(this, 9)}>9</li>
            <li onClick = { this.toDetial.bind(this, 10)}>10</li>
          </ul>
        </div>
      </div>
    )
  }
}
export default withRouter(Kind)
